<template>
  <h1>这是一个vuex页</h1>
  <p>count: {{ count }}</p>
  <p>tenTimes: {{ tenTimes }}</p>
  <h1>命名空间</h1>
  <p>无命名空间</p>
  <p>访问 模块A中的state数据: {{ $store.state.a.countA }}</p>
  <p>访问 模块A中的getter数据: {{ $store.getters.countAA }}</p>
  <p>有命名空间</p>
  <p>访问 模块B中的state数据: {{ $store.state.b.countB }}</p>
  <p>访问 模块B中的getter数据: {{ $store.getters['b/countBB'] }}</p>

  <h1>MapXXX方法</h1>
  <h2>全局</h2>
  <p>state</p>
  <p>count: {{ count }}</p>
  <p>getters</p>
  <p>tenTimes: {{ tenTimes }}</p>
  <p>countAA: {{ countAA }}</p>
  <p>mutations</p>
  <button @click="emitIncrementMut">触发incrementMut</button>
  <button @click="increaseA">触发increaseA</button>
  <p>actions</p>
  <button @click="emitIncrementAct">直接触发incrementAct</button>
  <button @click="asyncIncreaseA">触发asyncIncreaseA</button>

  <h2>局部</h2>
  <p>moduleB state</p>
  <p>countB: {{ countB }}</p>

  <p>moduleB mutations</p>
  <button @click="emitIncreaseB">触发increaseB</button>

  <h2>特殊情况</h2>
  <p>countA:{{ countA }}</p>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
  export default {
    computed:{
      // 映射全局state
      ...mapState(['count']),
      // 映射全局getter
      ...mapGetters(['tenTimes','countAA']),

      // 映射模块A的countA
      ...mapState({
        countA: state => state.a.countA
      }),

      // 映射局部
      ...mapState('b',['countB']),
      // ...
    },
    methods:{
      // 映射全局mutations
      ...mapMutations(['incrementMut','increaseA']),
      // 映射全局actions
      ...mapActions(['incrementAct','asyncIncreaseA']),
      emitIncrementMut(){
        this.incrementMut({count:40})
      },
      emitIncrementAct(){
        this.incrementAct({count:400})
      },

      // 映射局部
      ...mapMutations('b',['increaseB']),
      emitIncreaseB(){
        this.increaseB()
      },
      // ...
    }
  }
</script>

<style scoped>

</style>